// 引入文件 
import React,{ Component } from 'react'

import Header from './components/Header'
import Lists from './components/Lists'
import Footer from './components/Footer'

import './App.css'


// 创建类
export default class App extends Component{
    
    //初始化state
    state = {
        todos:[
            { id:'001',name:"逛街",isDone:false },
            { id:'002',name:"看电视",isDone:true },
            { id:'003',name:"跳舞",isDone:false },
            { id:'004',name:"敲代码",isDone:true }
        ]
    }

    // addTodo
    addTodo = (todoObj) =>{
        // 获取原todo
        const { todos } = this.state
        // 追加一个todo
        const newTodos = [todoObj,...todos]
        //更新
        this.setState({ todos:newTodos })
    }

    // 更新isDone
    updateTodo = (id,isDone)=>{
        // 获取状态中的todos
        const { todos } = this.state
        // 处理数据
        const newToDos = todos.map((todoObj)=>{
            if(todoObj.id === id) return {...todoObj,isDone}
            else return todoObj
        })
        this.setState({todos:newToDos})
    }

    // 删除Todo
    deteleTodo = (id)=>{
        const { todos } = this.state
        const newTodos = todos.filter( todoObj => todoObj.id !== id)
        this.setState({ todos : newTodos })
    }

    // 全选按钮
    selectAll =(isDone)=>{
        // 获取todos
        const { todos } = this.state
        // 数据加工处理
        const newTodos = todos.map((todosObj)=>{
            return {...todosObj,isDone}
        })
        // 设置todos
        this.setState({ todos: newTodos })
    }

    // 清除已完成的任务
    clearAllisDone = () =>{
        // 获取todos
        const { todos } = this.state

        // 数据处理
        const newTodos = todos.filter( todosObj => !todosObj.isDone )

        // 设置数据
        this.setState({ todos:newTodos })
    }

    render(){
        const { todos } = this.state
        return(
            <div className="container-wrap">
                <Header addTodo={ this.addTodo } />
                <Lists todos={ todos } updateTodo={ this.updateTodo } deteleTodo={ this.deteleTodo } />
                <Footer todos={ todos } selectAll={ this.selectAll } clearAllisDone={ this.clearAllisDone } />
            </div>
        )
    }
}